<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { Message, MessageStyle } from '@/types/common/components.ts';
import SvgIcon from '@/components/icon/SvgIcon/index.vue';
const props = withDefaults(defineProps<Message>(), {
  icon: '',
  theme: 'warning',
  msg: '',
  close: false,
});
// 关闭动画执行时间
const duration = '0.5s';
const visible = ref<boolean>(false);
let timer: any = null;
let timer_other: any = null;
onBeforeUnmount(() => {
  clearTimeout(timer);
  clearTimeout(timer_other);
});
onMounted(() => {
  visible.value = true;
  timer_other = setTimeout(close, 5000);
});
const customStyleVal = {
  warning: (): MessageStyle => {
    return {
      backgroundColor: '#fdf6ec',
      color: '#e6a23c',
      icon: 'icon-com-warning',
    };
  },
  success: (): MessageStyle => {
    return {
      backgroundColor: '#f0f9eb',
      color: '#67c23a',
      icon: 'icon-com-success',
    };
  },
  info: (): MessageStyle => {
    return {
      backgroundColor: '#f4f4f5',
      color: '#909399',
      icon: 'icon-com-info',
    };
  },
  error: (): MessageStyle => {
    return {
      backgroundColor: '#fef0f0',
      color: '#f56c6c',
      icon: 'icon-com-error',
    };
  },
};
const close = () => {
  visible.value = false;
  timer = setTimeout(
    () => {
      if (props.duration) {
        props.duration();
        clearTimeout(timer_other);
      }
    },
    parseInt(duration.replace('0.', '').replace('s', '')) * 100,
  );
};
const customStyle = computed(() => {
  let data = customStyleVal.warning();
  if (props.theme === 'info') {
    data = customStyleVal.info();
  }
  if (props.theme === 'success') {
    data = customStyleVal.success();
  }
  if (props.theme === 'error') {
    data = customStyleVal.error();
  }
  return {
    backgroundColor: data.backgroundColor,
    color: data.color,
    '--font-color': data.color,
  };
});
const icon = computed(() => {
  let data = customStyleVal.warning().icon;
  if (props.theme === 'info') {
    data = customStyleVal.info().icon;
  }
  if (props.theme === 'success') {
    data = customStyleVal.success().icon;
  }
  if (props.theme === 'error') {
    data = customStyleVal.error().icon;
  }
  return data;
});
</script>

<template>
  <Transition name="down">
    <div v-show="visible" class="portal-message-body" :style="customStyle">
      <div class="message-content">
        <div class="message-svg">
          <svg-icon :name="icon" :color="customStyle.color" />
        </div>
        <div class="message-info">{{ props.msg }}</div>
        <div v-if="props.close" class="close-button" @click="close">
          <svg-icon name="icon-com-close" />
        </div>
      </div>
    </div>
  </Transition>
</template>

<style scoped lang="scss">
.portal-message-body {
  width: 350px;
  height: 60px;
  position: fixed;
  z-index: 999999;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #999;
  border-radius: 4px;
  right: 60px;
  top: 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .message-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    .message-svg {
      font-size: 1.3rem;
      svg {
        fill: var(--font-color);
      }
    }
    .message-info {
      padding-left: 10px;
      box-sizing: border-box;
      overflow: hidden;
      white-space: break-spaces;
    }
    .close-button {
      position: absolute;
      width: 40px;
      height: 40px;
      font-size: 1.1rem;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      right: -20px;
      cursor: pointer;
    }
  }
}
.down-enter-active,
.down-leave-active {
  transition: all v-bind(duration);
}

.down-enter-from,
.down-leave-to {
  opacity: 0;
  transform: translate3d(0, -100px, 0);
}
</style>
